<template>
  <el-dialog :close-on-click-modal="false" :title="`${mode === 'add' ? '新增' : '修改'}拖轮费率`" width="500px" v-model="visible" @confirm="confirm"
    @cancel="visible = false" @close="closeDialog">
    <div class="formData">
      <el-form :model="formData" ref="ruleForm" label-width="100px" :rules="rules">
        <el-form-item label="交接班日期" prop="shiftDate">
          <el-date-picker v-model="formData.shiftDate" style="width: 100%;" value-format="YYYY-MM-DD" type="date" placeholder="请选择交接班日期" />
        </el-form-item>
        <el-form-item label="班次" prop="classCode">
          <Select placeholder="请选择班次" :selectData="selects.classCode" v-model:value="formData.classCode" />
        </el-form-item>
        <el-form-item label="交接班内容" prop="remark">
          <el-input v-model="formData.remark" placeholder="请填写交接班内容" />
        </el-form-item>
      </el-form>
    </div>
	<template #footer>
	      <div class="dialog-footer">
	        <el-button @click="closeDialog">取消</el-button>
	        <el-button type="primary" @click="confirm">
	          确认
	        </el-button>
	      </div>
	    </template>
  </el-dialog>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive,
		defineEmits,
		defineExpose,
		nextTick
	} from "vue";
	import { ElMessage, ElMessageBox,ElNotification } from "element-plus";
import api from '@/api/plan/disLog/index'
import Select from '@/components/Select/index.vue'
const emit = defineEmits(['callback'])
const selects = ref({
		classCode: [
		  { label: '白班', value: '01' },
		  { label: '夜班', value: '02' }
		]
	})

const visible = ref(false)
const mode = ref('add')
const row = ref({})
const formData = ref({
      shiftDate: '',
      classCode: '',
      remark: ''
    })
  const ruleForm = ref({})
  
  const rules = ref({
	shiftDate: [
		{ required: true, message: '不能为空', trigger: 'blur' }
	],
	classCode: [
		{ required: true, message: '不能为空', trigger: 'blur' }
	],
	remark: [
		{ required: true, message: '不能为空', trigger: 'blur' }
	]
  })
// 展示
const show = params => {
  visible.value = true
  mode.value = params?.mode || 'add'
  if (mode.value === 'edit') {
    row.value = params.row
    editInit()
  }
}
// 编辑
const editInit = async () => {
  const { data } = await api.getDetailById(row.value.id)
  formData.value = { ...data }
}
// 确认
const confirm = () => {
  ruleForm.value.validate(valid => {
    if (valid) {
		let request
		if (mode.value === 'add') {
		  request = api.save
		  delete formData.value.id
		} else {
		  request = api.update
		}
		request(formData.value).then(res => {
		  if (res.code == '200') {
		    ElMessage.success('保存成功')
		    visible.value = false
		    emit('callback')
		  } else {
		    ElMessage.error(res.msg)
		  }
		})
    } else {
      ElMessage.warning('请完善表单信息！')
    }
  })
}

// 重置
const closeDialog = () => {
  nextTick(() => {
    visible.value = false
    ruleForm.value.resetFields()
  })
}
defineExpose({
  show
})
</script>
